<script lang="ts" setup>
import { useProfile } from '@/stores'
import { useDayjsFormat } from '@/utils'
import MpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html.vue'
import { computed } from 'vue'

const mpHtmlConfig = {
  tagStyle: {
    h1: 'margin: 2em 0 1em; font-size: 1.5em; line-height: 1.5; text-align: center;',
    h2: 'margin: 1em 0; font-size: 1.25em; line-height: 1.5',
    p: 'margin: 1em 0; line-height: 1.5',
    ul: 'margin: 1em 0; padding-left: 2em;',
    ol: 'margin: 1em 0; padding-left: 2em;',
    li: 'margin: 1em 0; line-height: 1.5',
  },
}

const profile = useProfile()
const content = computed(() => {
  const { userInfo } = profile

  return `<h1>委托担保申请</h1>

<p>本人因与青岛洛然租赁服务有限公司签署了《租赁合同》。为维护青岛洛然租赁服务有限公司的合法权益，现本人自愿委托咸阳华瑞融资担保有限公司（以下称担保公司）就本人履行清偿义务向青岛洛然租赁服务有限公司提供担保</p>

<p>本人自愿向担保公司作出如下申请和承诺：</p>
<ol>
  <li>本人自愿申请委托担保公司向青岛洛然租赁服务有限公司提供担保</li>
  <li>担保方式为一般保证。担保金额以担保公司最终通过审批的金额为准</li>
  <li>担保公司向本人送达的各类通知、信息、协议文件内容（包括但不限于债权转让通知、逾期和代偿信息）均可通过本人在出借人或担保公司处预留的联系方式以电话、短信、电子邮件等任意方式通知本人。若本人通过互联网平台进行的融资借款，担保公司有权按照本人在平台注册时预留的联系方式通知本人。担保公司按照本条约定向本人送达各类通知、协议文件等，无论本人是否收到，均视为通知送达。本人承诺变更联系方式时会及时告知出借人和担保公司。若本人变更联系方式未及时告知，由本人承担所有不利后果</li>
  <li>本人同意并不可撤销地授权担保公司通过相关征信系统将本人个人信息、委托担保相关信息、履约信息、担保公司代偿信息上传至中国人民银行金融信用信息基础数据库（中国人民银行征信系统）。如本人不能如期偿还本金、利息、代偿款项及其他应还款项（如有）导致担保公司代偿，本人个人征信将会因逾期而产生不良记录。本人对该内容的含义及法律后果已全部知晓并予以接受</li>
  <li>本人未能按照合同的约定偿还借款或代偿款等款项导致担保公司部分或全部代偿即为本人违约。担保公司有权向本人追偿为之代偿的全部款项、代偿资金使用利息以及为行使追偿权而产生的律师费、诉讼保全担保费。代偿资金使用利息按年利率24%计算，自代偿之日起直至全部款项清偿完毕为止</li>
  <li>本人同意通过互联网平台点击相关按钮或亲自签署的方式来确定委托担保申请，担保公司直接向债权人公司发出担保函即视为担保公司同意本人的委托担保申请，担保公司不再另行通知本人。担保函一经发出，本人不得撤销担保申请并承诺接受本委托担保申请内容的约束。本人对该内容的含义及法律后果已全部知晓并予以接受</li>
  <li>担保公司向债权人公司出具的担保函内容与本委托担保申请内容有冲突的，以担保函内容为准。本人对此无任何异议</li>
  <li>若本人与担保公司因委托担保产生纠纷，由担保公司所在地人民法院诉讼解决</li>
  <li>本人已仔细阅读并完全理解该内容，对该内容的含义及法律后果已全部知晓并予以接受</li>
</ol>

<p>申请人：${userInfo.name}</p>
<p>身份证号：${userInfo.idCard}</p>
<p>联系电话：${userInfo.phone}</p>
<p>${useDayjsFormat(undefined, 'DD')}</p>`
})
</script>

<template>
  <view class="bg-white px-30px safe-pb-30px text-30px">
    <mp-html :content="content" :tag-style="mpHtmlConfig.tagStyle"></mp-html>
  </view>
</template>

<style lang="less" scoped></style>
